<template>
  <div class="centreLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-layer-group" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">实时发电压</span>
          <dv-decoration-1 class="dv-dec-1" />
        </div>
      </div>
      <div class="d-flex jc-center">
        <div id="mainPress" style="height: 250px; width: 100%;"></div>
      </div>
      <div>
        <div class="bottomInfo">
          <div class="detailInfo">当日电压峰值
            <div style="color:#fd666d ; margin: 10%">
              100 kV
            </div>
          </div>
          <div class="detailInfo">当日电压谷值
            <div style="color:#67e0e3; margin: 10% ">
              10 kv
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
  var chartDom = document.getElementById('mainPress');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    series: [
      {
        type: 'gauge',
        axisLine: {
          lineStyle: {
            width: 30,
            color: [
              [0.3, '#67e0e3'],
              [0.7, '#37a2da'],
              [1, '#fd666d']
            ]
          }
        },
        pointer: {
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          distance: -18,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        },
        splitLine: {
          distance: -30,
          length: 30,
          lineStyle: {
            color: '#fff',
            width: 4
          }
        },
        axisLabel: {
          color: 'inherit',
          distance: 30,
          fontSize: 15
        },
        detail: {
          valueAnimation: true,
          formatter: '{value} kV',
          color: 'inherit',
          offsetCenter: [0, '100%'] // 将显示值的位置向下移动50%
        },
        data: [
          {
            value: 70
          }
        ]
      }
    ]
  };
  setInterval(function () {
    myChart.setOption({
      series: [
        {
          data: [
            {
              value: +(Math.random() * 100).toFixed(2)
            }
          ]
        }
      ]
    });
  }, 2000);

  option && myChart.setOption(option);
})


</script>



<style lang="scss" scoped>
.detailInfo {
  font-size: larger;
  text-align: center;
  align-items: center;
}

.bottomInfo {
  height: 100px;
  display: flex;
  align-items: center;
  align-content: space-between;
  justify-content: space-around;
}

.centreLeft1 {
  $box-width: 300px;
  $box-height: 410px;
  padding: 16px;
  height: $box-height;
  min-width: $box-width;
  border-radius: 5px;

  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }

  .text {
    color: #c3cbde;
    font-size: 20px;
  }

  .dv-dec-1 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }

  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;

    .active-ring-name {
      padding-top: 10px;
    }
  }
}
</style>
